<template>
  <div>
    <div class="loading" v-if="loading">数据加载中…</div>
    <div class="loading" v-if="!isLogin">请先登录</div>
    <div id="userprofile" v-if="!loading && isLogin">
    <div class="person">
      <div class="avatar">
        <div class="imgbox">
          <img :src="avatarUrl" alt="" />
        </div>
      </div>
      <div class="personinfo">
        <div class="title">
          <div class="name" v-html="nickname"></div>
        </div>
        <div class="introduce">
          <div class="number">
            <ul class="three">
              <li>
                <span>{{ geteventcount }}</span>
                <div>动态</div>
              </li>
              <li @click="tocontacts($route.query.userId,nickname,0)">
                <span>{{ getfollows }}</span>
                <div>关注</div>
              </li>
              <li @click="tocontacts($route.query.userId,nickname,1)">
                <span>{{ getfolloweds }}</span>
                <div>粉丝</div>
              </li>
            </ul>
          </div>
          <ul class="two">
            <li>所在地区：<span>海外 其他</span></li>
            <li>
              个人介绍：<span>{{ signature }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mysonglists">
      <div class="title">
        创建的歌单（<span>{{ mysongslist.length }}</span
        >）
      </div>
      <ul>
        <li
          v-for="(item, index) in mysongslist"
          :key="index"
          @click="tolisting(item.id)"
        >
          <img :src="item.coverImgUrl" alt="" />
          <span class="name" id="long">{{ item.name }}</span>
          <span class="total">歌曲：{{ item.trackCount }}首</span>
          <span class="by">by {{ item.creator.nickname }}</span>
          <span class="collect">收藏 {{ item.subscribedCount }}</span>
          <span class="play">播放 {{ item.playCount }}</span>
        </li>
      </ul>
    </div>
    <div class="collectsonglists">
      <div class="title">
        收藏的歌单（<span>{{ collectlist.length }}</span
        >）
      </div>
      <Repeat :songlist="collectlist" :isShow="isShow"></Repeat>
    </div>
  </div>
  </div>
</template>

<script>
import Repeat from "../pages/Repeat.vue";
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "UserProfile",
  components: { Repeat },
  data() {
    return {
      loading:true,

      nickname:"",
      avatarUrl:"",
      eventcount: "", //动态
      followeds: "", //被关注
      follows: "", // 关注
      signature: "", //签名
      mysongslist: [], //我创建的歌单
      collectlist: [], //我收藏的歌单
      isShow: true,

    };
  },

  computed: {
    userId() {
      return this.$route.query.userId;
    },
    isLogin(){
      return this.$store.state.userAbout.userInfo.isLogin
    },
    geteventcount(){
      return this.eventcount<9999?this.eventcount:parseInt(this.eventcount/10000) + "w"
    },
    getfolloweds(){
      return this.followeds<9999?this.followeds:parseInt(this.followeds/10000) + "w"
    },
    getfollows(){
      return this.follows<9999?this.follows:parseInt(this.follows/10000) + "w"
    }
  },
  watch: {
    getId(){
      this.update()
    }
  },
  methods: {
    tolisting(id) {
      this.$bus.$emit("ToListing", id);
    },
    tocontacts(id,nickname,i){
      this.$bus.$emit("ToContacts",id,nickname,i)
    },

    update(){
      this.collectlist = []
      this.mysongslist = []
      axios
          .get("http://localhost:8013/api/user/detail?uid=" + this.userId)
          .then((res) => {
            this.eventcount = res.data.profile.eventCount;
            this.followeds = res.data.profile.followeds;
            this.follows = res.data.profile.follows;
            this.signature = res.data.profile.signature;
            this.avatarUrl = res.data.profile.avatarUrl;
            this.nickname = res.data.profile.nickname

            this.loading = false
          });
        axios
          .get("http://localhost:8013/api/user/playlist?uid=" + this.userId)
          .then((res) => {
            this.collectlist = res.data.playlist.filter((item, i) => {
              return item.userId !== this.userId;
            });
            this.mysongslist = res.data.playlist.filter((item, i) => {
              return item.userId == this.userId;
            });
          });
    }
  },
  activated() {
    this.update()
  },
};
</script>

<style scoped>
#userprofile {
  padding-bottom: 80px;
  line-height: 20px;
}
#userprofile .person {
  height: 220px;
  width: 100%;
}
.avatar {
  width: 220px;
  height: 220px;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}
.imgbox {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}
img {
  width: 100%;
}
.personinfo {
  padding-top: 10px;
  padding-left: 50px;
  height: 200px;
  text-align: left;
}
.person .title {
  padding: 5px 0px 15px;
}
.title .name {
  height: 30px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
.three {
  width: 100%;
  height: 60px;
  line-height: 20px;
}
.number .three li {
  color: #333;
  text-align: center;
  float: left;
  width: 50px;
  padding: 10px;
  height: 30px;
  border-right: 1px solid rgb(73, 73, 73);
}
.three li:nth-child(1){
  cursor: no-drop;
}
.three li:nth-child(2),.three li:nth-child(3){
  cursor: pointer;
}
.three li span {
  font-size: 20px;
}
.three li div {
  font-size: 13px;
}
.two {
  font-size: 7px;
  margin-top: 15px;
}
.two li,
.two li span {
  height: 33px;
  line-height: 33px;
  font-size: 12px;
}
.two li span {
  color: rgb(80, 80, 80);
}

.mysonglists {
  text-align: left;
  margin: 20px 0 20px;
}
.mysonglists .title,
.collectsonglists .title {
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  padding-left: 20px;
  text-align: left;
}
.mysonglists ul li {
  height: 60px;
  padding-left: 20px;
  line-height: 60px;
  padding-top: 10px;
}

.mysonglists ul li img {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 10px;
}
.mysonglists ul li span {
  width: 11%;
  padding-left: 20px;
  display: inline-block;
  font-size: 13px;
  color: #666;
  height: 50px;
  overflow: hidden;
}
.mysonglists ul li #long {
  width: 40%;
  color: #333;
  font-size: 16px;
}

.mysonglists ul li:nth-of-type(even) {
  background: #fafafa;
}
#userprofile .mysonglists ul li:hover {
  background: #f1f1f1;
}
</style>